<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div :id="code" :style="'width: 100%;height: ' + height + ';'" />
  </el-card>
</template>

<script>
import theme from '@/components/ik/echarts/theme/ik.json'
import { dimensionExtraction, initDoubleSeries } from '@/components/ik/echarts/dataProcess'
import * as echarts from 'echarts'

export default {
  name: 'IkPolarPointChart',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    code: {
      type: String,
      default: 'bar.base'
    },
    data: {
      type: Array,
      default: function() {
        return [
          { 'type': '送货车', 'value1': '200', 'value2': '21' },
          { 'type': '送货车', 'value1': '244', 'value2': '34' },
          { 'type': '送货车', 'value1': '145', 'value2': '25' },
          { 'type': '送货车', 'value1': '340', 'value2': '11' },
          { 'type': '接货车', 'value1': '94', 'value2': '27' },
          { 'type': '接货车', 'value1': '293', 'value2': '34' },
          { 'type': '接货车', 'value1': '40', 'value2': '43' },
          { 'type': '接货车', 'value1': '190', 'value2': '40' },
          { 'type': '等待车', 'value1': '320', 'value2': '42' },
          { 'type': '等待车', 'value1': '24', 'value2': '39' }
        ]
      }
    },
    // 数据分析维度 - 第一数据维度
    firstDataDimensionField: {
      type: String,
      default: 'value1'
    },
    firstDataDimensionMin: {
      type: String,
      default: ''
    },
    firstDataDimensionMax: {
      type: String,
      default: ''
    },
    firstDataDimensionInterval: {
      type: String,
      default: ''
    },
    firstDataDimensionUom: {
      type: String,
      default: ''
    },
    firstDataDimensionStartAngle: {
      type: String,
      default: '90'
    },
    firstGridType: {
      type: String,
      default: 'list'
    },
    // 数据分析维度 - 第二数据维度
    secondDataDimensionField: {
      type: String,
      default: 'value2'
    },
    secondDataDimensionMin: {
      type: String,
      default: ''
    },
    secondDataDimensionMax: {
      type: String,
      default: ''
    },
    secondDataDimensionInterval: {
      type: String,
      default: ''
    },
    secondDataDimensionUom: {
      type: String,
      default: ''
    },
    secondGridType: {
      type: String,
      default: 'list'
    },
    // 数据分析维度 - 第一分析维度 - 横坐标
    analysisDimensionField: {
      type: String,
      default: ''
    },
    analysisDimension: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 样式
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chartAnalysisDimension: [],
      chartSeries: []
    }
  },
  mounted() {
    const $this = this
    // 初始化 chart 样式
    // 基于准备好的dom，初始化echarts实例
    const dom = document.getElementById($this.code)
    echarts.registerTheme('ik', theme)
    // 初始化组件，配合主题 - 'dark'
    const myChart = echarts.init(dom, 'ik')
    // 如果第一维度不存在，通过字段抽取
    if ($this.analysisDimension.length === 0) {
      // 第二维度非必需，填写则抽取
      if ($this.analysisDimensionField !== '') {
        $this.chartAnalysisDimension = dimensionExtraction($this.data, $this.analysisDimensionField)
      }
    } else {
      $this.chartAnalysisDimension = $this.analysisDimension
    }

    // 生成 series
    const series = initDoubleSeries($this.data, $this.chartAnalysisDimension, [], $this.analysisDimensionField, '',
      $this.firstDataDimensionField, $this.firstGridType, $this.secondDataDimensionField, $this.secondGridType)

    // 生成第一数据轴数据
    const firstAxis = {}
    if ($this.firstDataDimensionMin !== '') {
      firstAxis['min'] = Number($this.firstDataDimensionMin)
    }
    if ($this.firstDataDimensionMax !== '') {
      firstAxis['max'] = Number($this.firstDataDimensionMax)
    }
    if ($this.firstDataDimensionInterval !== '') {
      firstAxis['interval'] = Number($this.firstDataDimensionInterval)
    }
    if ($this.firstDataDimensionStartAngle !== '') {
      firstAxis['startAngle'] = Number($this.firstDataDimensionStartAngle)
    }
    if ($this.firstDataDimensionUom !== '') {
      console.log('')
    }
    // 生成第二数据轴数据
    const secondAxis = {}
    if ($this.secondDataDimensionMin !== '') {
      secondAxis['min'] = Number($this.secondDataDimensionMin)
    }
    if ($this.secondDataDimensionMax !== '') {
      secondAxis['max'] = Number($this.secondDataDimensionMax)
    }
    if ($this.secondDataDimensionInterval !== '') {
      secondAxis['interval'] = Number($this.secondDataDimensionInterval)
    }
    if ($this.secondDataDimensionUom !== '') {
      console.log('')
    }
    //
    const chartSeries = []
    for (const key in series) {
      chartSeries.push(
        {
          coordinateSystem: 'polar',
          name: key,
          type: 'scatter',
          smooth: true,
          showBackground: true,
          data: series[key]
        }
      )
    }

    // 绘制图表
    myChart.setOption({
      tooltip: {
        backgroundColor: ['rgba(255,255,255,0.7)'],
        formatter: function(obj) {
          const value = obj.value
          return '(' + value[0] + ', ' + value[1] + ')'
        }
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: $this.chartAnalysisDimension
      },
      polar: {
        center: ['50%', '50%']
      },
      angleAxis: firstAxis,
      radiusAxis: secondAxis,
      series: chartSeries
    })
  },
  methods: {
    // 切换密码显示
  }
}
</script>

